<template>
	<footer>
		<div class="router-view">
			<div class="router-btn" v-for="router in routerData" :key="router.path">
				<div
					@click="handlerRouterClick(router)"
					:class="['router', { 'router-activate': router.active }]"
				>
					<img src="../../assets/images/home/arraws.svg"/>
					<span v-text="router.name"></span>
					<img src="../../assets/images/home/arraws.svg"/>
				</div>
				<div :class="{ 'light': router.active }"></div>
			</div>
		</div>
	</footer>
</template>

<script>
export default {
	components: {},
	props: {},
	data() {
		return {
			curPath: "/",
			routerData: [
				{
					id: "0x011101",
					path: "/",
					type: 0,
					name: "管网监测",
					active: true,
				},
				{
					id: "0x011102",
					path: "/femen",
					type: 1,
					name: "阀门监测",
					active: false,
				},
				{
					id: "0x011103",
					path: "/shuibiao",
					type: 2,
					name: "水表监测",
					active: false,
				},
				{
					id: "0x011104",
					path: "/xiaofang",
					type: 3,
					name: "消防监测",
					active: false,
				},
			],
		};
	},
	watch: {},
	computed: {},
	methods: {
		//TODO 建议使用vuex进行路径管理
		handlerRouterClick(router) {
			var that = this;
			this.routerData.forEach((item) => {
				if (item.name === router.name) {
					router.active = true;
					that.$parent.showPointType = router.type;
					that.$parent.initPoint();
				} else {
					item.active = false;
				}
			});
		},
	},
};
</script>
<style lang="scss" scoped>
footer {
	user-select: none;
	height: 69px;
	width: 100%;
	bottom: 0;
	background-image: url("../../assets/images/home/footer_bg.svg");
	background-repeat: no-repeat;
	background-position: center;

	.router-view {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.router-btn {
			width: 130px;
			font-size: 16px;
			margin: 0 30px;

			text-align: center;
			position: relative;
			display: flex;
			align-items: center;
			height: 100%;

			.router {
				cursor: pointer;
				margin-top: 10px;
				position: absolute;
				z-index: 2;
				padding: 6px 0;
				box-sizing: border-box;

				span {
					z-index: 200 !important;
				}

				img:nth-child(1) {
					height: 12px;
					width: 30px;
					transform: rotate(180deg);
				}

				img:nth-child(3) {
					height: 12px;
					width: 30px;
				}

				&:hover {
					color: #02c4d6;
				}
			}

			.light {
				left: 46px;
				position: absolute;
				width: 35px;
				height: 0;
				margin-top: 10px;
				box-shadow: 0 0 15px 10px #02c4d6;
				z-index: 1;
			}
		}

		.router-activate {
			border-image: linear-gradient(
					90deg,
					#ffffff00 0%,
					#7ab2e611 25%,
					#7ab2e6 50%,
					#7ab2e611 85%,
					#ffffff00 100%
			) 9;
			border-top: 2px solid;
			border-bottom: 2px solid;
		}
	}
}
</style>